<template>
  <div>
    <div class="top">优惠券</div>
    <div class="content">
      <div class="tab d-flex">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="first" />
          <el-tab-pane label="已发布" name="second" />
          <el-tab-pane label="未发布" name="third" />
          <el-tab-pane label="失效" name="fourth" />
        </el-tabs>
        <el-button @click="$router.push({path: '/coupon-mng/add-coupon'})">添加</el-button>
      </div>
      <div class="table">
        <el-table :data="tableData" :height="height" style="width: 100%">
          <el-table-column prop="name" label="名称" width="180" />
          <el-table-column prop="name" label="商场" width="180">
            <template slot-scope="scope">
              <div>{{scope.row.shop_id == 1 ? '欧丽洛雅吴中路商场' : '全球家居1号店'}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="使用范围">
            <template slot-scope="scope">
              <div>{{scope.row.type == 1 ? '全场通用' : '指定品牌'}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="使用对象">
            <template slot-scope="scope">
              <div>{{scope.row.user_type == 1 ? '设计师' : '用户'}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="discount_money" label="面值"></el-table-column>
          <el-table-column prop="discount_limit" label="使用门槛">
            <!-- <template slot-scope="scope">
              <div>满{{scope.row.discount_limit}}减{{scope.row.discount_money}}</div>
            </template>-->
          </el-table-column>
          <el-table-column prop="get_limit" label="张/人" />
          <el-table-column prop="get" label="已领取">
            <template slot-scope="scope">
              <div>
                <span
                  class="col-blue"
                  @click="$router.push({path: '/coupon-mng/coupon-status', query: {status: 0,id:scope.row.id}})"
                >{{ scope.row.get }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="verify" label="已核销">
            <template slot-scope="scope">
              <div>
                <span
                  class="col-blue"
                  @click="$router.push({path: '/coupon-mng/coupon-status', query: {status: 1,id:scope.row.id}})"
                >{{ scope.row.verify }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="有效期" width="160">
            <template slot-scope="scope">
              <div>{{scope.row.created_at}}</div>
              <div>{{scope.row.end_at}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="是否发布">
            <template slot-scope="scope">
              <el-switch
                @change="openCoupon(scope.row)"
                v-model="scope.row.enable"
                :active-value="1"
                :inactive-value="0"
              />
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" align="center"  fixed="right" width="200">
            <template slot-scope="scope">
              <div>
                <span
                  class="col-blue"
                  @click="editCoupon(scope.row,1)"
                  v-show="scope.row.enable == 0 && scope.row.is_delete == 0"
                >编辑</span>
                <span
                  class="col-blue"
                  @click="editCoupon(scope.row,2)"
                  v-show="scope.row.enable == 1 || scope.row.is_delete == 1"
                >查看</span>
                <span
                  class="col-red"
                  v-show="scope.row.is_delete == 1"
                  @click="delCoupon(scope.row)"
                >删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <Pagination class="pagination" :total="total" @nextPage="handleNextPage" />
      </div>
    </div>
  </div>
</template>
<script>
import Pagination from "@/common/pagination";
import Resize from '@/common/mixins/resize'
import { getCouponList, delCoupon, openCoupon } from "@/api/http/coupon";
export default {
  components: {
    Pagination
  },
  mixins: [Resize],
  data() {
    return {
      defaultHeight:280,
      activeName: "first",
      status: "",
      total: 10,
      page: 1,
      tableData: [],
      value: true
    };
  },
  created() {
    this.getCouponList();
  },
  methods: {
    // 启用禁用优惠券
    openCoupon(row) {
      openCoupon({ id: row.id }).then(res => {
        console.log(res, "---res");
        if (res.code == 200) {
          this.$message.success("成功");
          this.getCouponList();
        }
      });
    },
    // 编辑优惠券
    editCoupon(row, num) {
      window.localStorage.setItem("couponMes", JSON.stringify(row));
      this.$router.push({
        path: "/coupon-mng/add-coupon",
        query: { id: row.id, num: num }
      });
    },
    // 删除失效优惠券
    delCoupon(row) {
      delCoupon({ id: row.id }).then(res => {
        if (res.code == 200) {
          this.$message.success("删除成功");
          this.getCouponList();
        }
      });
    },
    handleNextPage(page) {
      this.page = page;
      this.getCouponList();
    },
    // 获取优惠券列表
    getCouponList() {
      getCouponList({ status: this.status, page: this.page }).then(res => {
        // console.log(res, "---res");
        if (res.code == 200) {
          this.total = res.data.total;
          this.tableData = res.data.data;
        }
      });
    },
    handleClick() {
      if (this.activeName == "first") {
        this.status = "";
      } else if (this.activeName == "second") {
        // 已发布
        this.status = 1;
      } else if (this.activeName == "third") {
        // 未发布
        this.status = 0;
      } else if (this.activeName == "fourth") {
        // 已失效
        this.status = 2;
      }
      this.getCouponList();
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
@import "@/styles/el-pagination.scss";
@import "@/styles/color.scss";
@import "@/styles/el-table.scss";
.top {
  line-height: 44px;
  color: rgba(68, 68, 68, 1);
  font-size: 18px;
  text-align: left;
  font-family: Roboto;
  font-weight: bold;
}
.d-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-tabs /deep/ .el-tabs__header {
  margin: 0;
}
</style>
